<template>
  <router-view v-if="isCom"></router-view>
  <div class="container-main" v-else>
    <template v-if="$data.ajax401">
      <browser-check></browser-check>
      <component :is="$data.loginPage" @login_ok="login_ok" ref="login"></component>
    </template>
    <template v-else>
      <left-menu
          ref="menu"
          :menus="$data.menus"
          :menu="url"
      ></left-menu>
      <div class="main-right">
        <app-header ref="head"></app-header>

        <div style="height:0;flex: 1;overflow: auto;padding: 2px 6px 2px 4px;display:flex;flex-direction: column;">
          <router-view v-slot="{ Component }">
            <keep-alive :max="32">
              <component :is="Component" :key="$data.version + jv.$route.fullPath"/>
            </keep-alive>
          </router-view>
        </div>
      </div>
    </template>
  </div>
</template>

<script setup>
import appHeader from './layout/app-header.vue'
import leftMenu from './layout/left-menu.vue'
import browserCheck from "./layout/browser-check.vue"
import login from "./layout/login.vue"
import login2 from "./layout/login2.vue"
import login3 from "./layout/login3.vue"


let $emit = defineEmits(["login_ok"]);

//定义 vue2的this,当前组件
let $self = getCurrentInstance();
jv.main = $self;


const $router = useRouter()
const $route = useRoute();

jv.$router = $router;
jv.$route = $route;

jv.getFullPath = () => jv.$router.currentRoute.value.fullPath

//定义data
const $data = reactive({

  currentSetting: {},
  loginPage: login,
  menus: [],    //菜单
  isCollapse: true,
  user: {name: ""},
  ajax401: null,
  version: 0,

})

//这里不能是 $computed
const user = computed(() => $data.user);
provide("user", user);

let setting = reactive({});
provide("setting", setting)

const isCom = computed(() => top.location.json._com_)

watch(() => $data.ajax401, value => {
  nextTick(() => {
    //true/false,是否401？ 是则展现登录框
    if (value) {
      document.body.classList.add("login-bg");
    } else {
      document.body.classList.remove("login-bg");
      document.body.style.backgroundImage = "";
    }

    if (!$data.menus.length && !value) {
      jv.admin.getAdminMenus().then(v => {
        $data.menus = v;
        jv.main.menus = v;
      });
    }
  });
})


let url = $computed(() => jv.getFullPath())

//定义 onMounted 方法
onMounted(() => {

  if (isCom.value) {
    console.log(isCom.value)
    return;
  }

  $data.user = JSON.parse(localStorage.getItem("login-user") || "{}");
  Object.assign(setting, JSON.parse(localStorage.getItem("login-setting") || "{}"))

  jv.me.user = $data.user;

  if (!jv.token || !setting.corpName) {
    jv.$http.get("/open/get-token").then(res => {
      var json = res.data.data;
      localStorage.setItem("login-setting", JSON.stringify(json));
      jv.token = json.token;
      setting.corpName = json.corpName;
      setting.systemName = json.systemName;
      setting.corpLogo = json.corpLogo;
      setting.corpIcon = json.corpIcon;

      top.document.title = json.systemName;
      top.doc_icon.href = json.corpIcon

      if (json.loginPage) {
        if (json.loginPage == "login") {
          $data.loginPage = login;
        } else if (json.loginPage == "login2") {
          $data.loginPage = login2;
        } else if (json.loginPage == "login2") {
          $data.loginPage = login3;
        }
      }
    });
    $data.ajax401 = false;
  } else {
    jv.$http.post("/sys/getMine").then(res => {
      login_ok(res.data.data);
    });
  }

  if (jv.msie) {
    jv.addStyleDom("ie-kv", ".kv {min-width:180px;}")
  }

});


const login_ok = json => {
  if (!json) {
    return;
  }
  $data.user = json;
  jv.me.user = json;
  $data.ajax401 = false;
  localStorage.setItem("login-user", JSON.stringify(json));


  jv.loadSetting().then(res => {
    Object.assign(setting, res);
  });
}


jv.show_login = () => {
  $data.ajax401 = true;
}

jv.refreshTab = () => {
  $data.version++;
}


</script>


<style lang="scss" scoped>
.container-main {
  display: flex;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;

  .main-right {
    width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: auto;
  }
}
</style>